import React from 'react'


interface Props {
    name?: string,
    arr?: string[],
    fun?:(name:string)=>void
    status?: 'loading' | 'error' | 'done'
}

function Welcome2(props:Props) {
    const { name="安慕吸", arr=['1'], fun } = props
    return (
        <>
            <span> 第一种方式约束props参数类型: name2: {name}</span>
            <span>
                传入数组：{JSON.stringify(arr)}
            </span>
            <span>
                传入函数：<button onClick={() => { fun?.('Hello') }}>点击</button>
            </span>
        </>
    )
}
function Welcome(props: { name: string }) {
    return (
        <>
            <span>第二种方式约束props参数类型: name: {props.name}</span>
        </>
    )
}

// const Welcome3:React.FC<Props> = (props) => {
//     return (
//         <>
//             <span>第三种方式约束props参数类型: name: {props.name} 使用react的FC约束类型</span>
//         </>
//     )
// }

export default function PropsTs() {
  return (
    <div>
      Props 类型约束的方式
      <div>1.0 <Welcome name={'Join'} /></div>
      <div> 2.0 <Welcome2 name={'Join2'} arr={['1', '2', '3']} fun={(name) => { console.log(name) }} status={'loading'} /></div>
      {/* <div> 3.0 <Welcome3 name={'Join2'} /></div> */}
    </div>
  )
}
